<!DOCTYPE html>
<html class="html">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="//static.nowcoder.com/nowcoder/1.2.2046/stylesheets/v2lib/global/global.ui.css">
    <link rel="stylesheet" href="//static.nowcoder.com/nowcoder/1.2.2046/stylesheets/v2lib/channel/default.css">
    <title>在线OJ系统</title></head>
<body>
<!--<body style="position: relative;">-->
<div style="height: 60px">
    <div class="nk-container     with-validate ">
        <div class="nowcoder-header js-nowcoder-header">
            <div class="header-main clearfix">
                <!--       使用自己的图片     -->
                <div class="my" >
                    <a class="my" href="/" title="在线OJ系统"></a>
                </div>
                <ul class="nowcoder-navbar">
                    <li class="active" data-type="home"><a href="/">首页</a></li>

                    <li data-type="tiku">
                        <a href="https://www.nowcoder.com/activity/oj">题库</a>
                        <ul class="sub-nav" data-type="tiku">
                            <li><a href="https://www.nowcoder.com/contestRoom">公司真题</a></li>
                            <li><a href="https://www.nowcoder.com/intelligentTest">专项练习</a></li>
                            <li><a href="https://www.nowcoder.com/activity/oj">在线编程</a></li>
                            <li><a href="https://www.nowcoder.com/mockexam/MockExam">模拟笔试</a></li>
                            <li><a href="https://www.nowcoder.com/schoolbooks">教材全解</a></li>
                            <li><a href="https://www.nowcoder.com/kaoyan">考研真题</a></li>
                            <li><a href="https://www.nowcoder.com/finalexam">期末考题</a></li>
                            <li><a href="https://www.nowcoder.com/activity/topics">精华专题</a></li>
                            <li><a href="https://www.nowcoder.com/questionCenter">试题广场</a></li>
                        </ul>
                    </li>


                    <li data-type="ai-interview">
                        <span class="ico-nav-new"></span>
                        <a href="https://www.nowcoder.com/interview/ai/index">面试</a>
                        <ul class="sub-nav" data-type="courses">
                            <li><a href="https://www.nowcoder.com/interview/ai/index">AI模拟面试</a></li>
                            <li><a href="https://www.nowcoder.com/interview/center">面经汇总</a></li>
                        </ul>
                    </li>
                    <li data-type="courses">
                        <a href="https://www.nowcoder.com/courses">学习</a>
                        <ul class="sub-nav" data-type="courses">
                            <li><a href="https://www.nowcoder.com/courses">课程</a></li>
                            <li><a href="https://www.nowcoder.com/blog/blogCenter">专栏 • 文章</a></li>
                            <li><a href="https://www.nowcoder.com/project/recommend">项目实战</a></li>
                            <li><a href="https://www.nowcoder.com/library">图书馆</a></li>
                            <li><a href="https://www.nowcoder.com/stacks">技术栈</a></li>
                        </ul>
                    </li>

                    <li data-type="recommand">
                        <a href="https://www.nowcoder.com/recommend/index">求职</a>
                        <ul class="sub-nav" data-type="recommand">
                            <li><a href="https://www.nowcoder.com/recommend/campus">校招版</a></li>
                            <li><a href="https://www.nowcoder.com/recommend/fulltime">社招版</a></li>
                        </ul>
                    </li>
                    <li data-type="discuss">
                        <a href="https://www.nowcoder.com/discuss">讨论区</a>
                        <ul class="sub-nav" data-type="discuss">
                            <li><a href="https://www.nowcoder.com/discuss">讨论区</a></li>
                            <li><a href="https://www.nowcoder.com/circle">圈子</a></li>
                        </ul>
                    </li>
                </ul>

                <ul class="nowcoder-navbar nowcoder-other-nav">
                    <li class="nav-search-wrapper js-nav-search">
                        <div class="search-input-wrap right">
                            <label class="icon-search icon-search-btn"><i class="icon-nc-search2"></i></label>
                            <input type="text" maxlength="255" placeholder="帖子、文章、试题、公司、牛友" autocomplete="off">
                        </div>
                    </li>
                    <li>
                        <a href="/home/resourcemap" class="icon-nc-nav">资源导航</a></li>
                    <li><a href="https://www.nowcoder.com/app" class="icon-mobile-phone">APP</a></li>

                    <li class="nav-msg">
                        <a class="icon-envelope" href="https://www.nowcoder.com/sns/message/435568364/conversation-list?type=1" data-unread-conv=""><span class="nav-msg-num msg-dot"></span>消息</a>
                    </li>

                    <li class="profile-item">
                        <a href="https://www.nowcoder.com/profile" class="nav-profile js-nc-avatar"><div class="img-box"><img src="https://images.nowcoder.com/images/20210224/435568364_1614142377492/FBC7ACF633AA18078E948AA3C25F3C58?x-oss-process=image/resize,m_mfit,h_100,w_100"></div></a>
                        <div class="profile-hover-wrapper">
                            <div class="profile-hover-info">
              <span>
                 <span class="profile-hover-name">牛客435568364号</span>
                              </span>
                                <a href="https://www.nowcoder.com/profile" class="profile-hover-btn">个人主页</a>
                            </div>
                            <div class="item-profile-box">
                                <a href="https://www.nowcoder.com/v2/resume/home" class="item-profile "><i class="hover-item-ico hover-item-ico1"></i>我的简历</a>
                                <a href="https://www.nowcoder.com/profile/435568364/tests" class="item-profile"><i class="hover-item-ico hover-item-ico2"></i>刷题</a>
                                <a href="https://www.nowcoder.com/profile/435568364/courses" class="item-profile"><i class="hover-item-ico hover-item-ico3"></i>学习</a>
                                <a href="https://www.nowcoder.com/profile/435568364/project/mine" class="item-profile"><i class="hover-item-ico hover-item-ico4"></i>项目</a>
                                <a href="https://www.nowcoder.com/profile/435568364/note" class="item-profile"><i class="hover-item-ico hover-item-ico5"></i>笔记</a>
                                <a href="https://www.nowcoder.com/profile/435568364/myFollowings" class="item-profile"><i class="hover-item-ico hover-item-ico6"></i>收藏</a>
                            </div>
                            <div class="hover-accout-wrapper">
                                <a href="https://www.nowcoder.com/profile/435568364/account"><i class="hover-item-ico hover-accout-icon"></i>账号设置</a>
                                <a href="javascript:void(0);" class="nc-logout"><i class="hover-item-ico hover-accout-logout"></i>退出登录</a>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>

</div>


<div class="mm-div">
    <!--components-->
    <section class="my-5 pt-5" id="app">
        <div class="container">
            <!-- 表示题目列表页 -->
            <div class="row mb-5" id="tables" v-show="status=='list'">
                <div class="col-sm-12">
                    <div class="mt-3 mb-5">
                        <h3>题目列表</h3>
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>标题</th>
                                <th>难度</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="problem in problems" v-on:click="getProblem(problem.id)">
                                <td>{{problem.id}}</td>
                                <td>{{problem.title}}</td>
                                <td>{{problem.level}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 表示题目详情页 -->
            <!-- 两个页面都在一个 html 中, 通过一些简单的技巧来完成显示上的切换 -->
            <!--  通过点击题目，然后进入题目详情，会分成左右两页，也就是富文本编辑器和题目详情分成左右部分-->
            <div class="row mb-5" v-show="status=='detail'">
                <div class="col-sm-12">
                    <div class="jumbotron jumbotron-fluid">
                        <div class="container">
                            <!-- 放置题目的标题和难度 -->
                            <h3>{{problem.id}}.{{problem.title}}.{{problem.level}}</h3>
                            <!-- 用来显示一个文本的原始内容 -->
                            <!-- 在 pre 标签内部来放置题目的要求 -->
                            <pre class="mypre">{{problem.description}}</pre>
                        </div>
                    </div>
                    <!-- v-model 能够做到双向绑定, 只要编辑框发生变化, 变量的值就改变了 -->
                    <div>
                        <div id="editor" style="min-height:400px;">
                            <textarea style="width: 100%; height: 200px"></textarea>
                        </div>
                    </div>
                    <button type="button" class="btn btn-success" v-on:click="compile(problem.id)">提交</button>
                </div>
            </div>
        </div>
    </section>
</div>


<!--footer-->
<div class="footermy">
    <section class="py-5 bg-dark" >
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                    <p class="pt-2 text-muted">
                        &copy; 版权所有, 涉外攀枝花
                    </p>
                </div>
            </div>
        </div>
    </section>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
<script>
    var app = new Vue({
        // #app CSS 中的 id 选择器
        el: '#app',
        data: {
            status: 'list',  // 'list' 题目列表 'detail' 题目详情
            problems: [

            ],
            // 当前用户选中的题目
            problem: {
                // id: 1,
                // title: '两数之和',
                // level: '简单',
                // description: '这是题目要求',
                // templateCode: 'templateCode'
            }
        },
        methods: {
            getProblems() {
                // jquery 这个库发送 ajax 请求的方式
                $.ajax({
                    url: 'problem',
                    type: 'get',
                    // data http 响应的 body, status 就是状态码
                    success: function (data, status) {
                        app.problems = data;
                    }
                })
            },
            getProblem(problemId) {
                $.ajax({
                    url: 'problem?id=' + problemId,
                    type: 'get',
                    success: function (data, status) {
                        app.problem = data;
                        app.status = 'detail'; //实现的在线切换题目列表和题目详情
                        // 预期点击某个题目的时候, 就能把题目的代码模板设置进去templatecode
                        // editor.setValue(data.templateCode);
                        editor.setValue(data.templatecode);
                    }
                });
            },
            compile(problemId) {
                // 这个方法会在点击 提交 按钮的时候触发
                // 就会给服务器发送一个 ajax 请求
                var question = {
                    id: problemId,
                    // code 就是 textarea 里的代码
                    // editor.getValue() 就能获取到编辑框内部的代码
                    code: editor.getValue(),
                }
                $.ajax({
                    url: 'compile',
                    type: 'post',
                    contentType: 'application/json; charset=utf-8',
                    // data 属性放置请求的 body 内容
                    // JS 里把对象转成 JSON 字符串的方法
                    data: JSON.stringify(question),
                    success: function (data, status) {
                        // 把得到的响应结果直接通过对话框的形式来显示
                        var msg = data.errno + "\n";
                        if (data.reason) {
                            msg += data.reason;
                        }
                        if (data.stdout) {
                            msg += data.stdout;
                        }
                        alert(msg);
                    }
                })
            }
        }
    });

    app.getProblems();

    // ace.js 的代码一定要放到 vue 的代码的后面.
    // 否则 ace.js 会受到 vue 的干扰就不生效了
    // 此处参数的 editor 就对应到上面的 <div id="editor">
    let editor = ace.edit("editor");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
    editor.setTheme("ace/theme/twilight");
    editor.session.setMode("ace/mode/java");
    editor.resize();
    document.getElementById('editor').style.fontSize = '20px';
</script>
</body>
</html>